<template>
    <div>

        <div class="input">
            <el-input v-model="parmas.name" placeholder="请输入角色名称" @clear="clearable" @keyup.enter.native="Search"
                @submit.native.prevent clearable />
            <el-button type="primary" @click="Search">查询</el-button>
            <el-button type="success" @click="Add">添加</el-button>
            <el-button type="danger" @click="Dels">批量删除</el-button>
        </div>
        <Table :tableData="tableData" :tableColumns="tableColumns" :tableConfig="tableConfig" @ids="dels" @id="del"
            @update="update" @sizeChange="sizeChange" @pageChange="pageChange" @power="Powers">
        </Table>
        <el-dialog v-model="dialogVisible" title="分配权限" width="30%" :destroy-on-close="true">
            <span> <el-tree ref="treeRef" :data="state.permission" node-key="id" show-checkbox
                    :default-checked-keys="checkeds" :props="defaultProps" /></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="Confirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import Table from '../../components/Table.vue'
import http from '../../api/role'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
let ids: any = ref([])
const treeRef = ref<any>();
interface IState {
    tableData: Array<any>
    tableColumns: [
        { prop: string, label: string },
    ]
    parmas: any
    tableConfig: {
        selection: boolean;
        addButton: boolean;
        editButton: boolean;
        delButton: boolean;
        otherButton: boolean;
        AuditButton: boolean;
        isPagination: boolean;
        total: Number;
        // details:String
    },
    dialogVisible: boolean,
    permission: Array<any>
    checkeds: Array<any>
    role: any
}
const state = reactive<IState>({
    tableData: [],
    tableColumns: [
        { prop: 'name', label: '角色名称' },
    ],
    parmas: { page: 1, pageSize: 10, name: '' },
    tableConfig: {
        selection: true,
        addButton: false,
        editButton: true,
        delButton: true,
        otherButton: false,
        AuditButton: true,
        isPagination: false,
        total: 0,
        // details:String
    },
    dialogVisible: false,
    permission: [],
    checkeds: [],
    role: {}
})
const roletree: any = ref()
let id = ref<any>()
const defaultProps = {
    children: 'children',
    label: 'name',
}
const { tableData, tableColumns, tableConfig, parmas, dialogVisible, checkeds } = toRefs(state)
// 修改权限
const Confirm = async () => {
    let ids = treeRef.value.getCheckedKeys()
    // const peridsdata = roletree.value.getpermission()
    console.log(ids);
    const res: any = await http.getpermissionedit({ roleid: id, perids: ids })
    console.log(res);
    if (res.code == 10000) {
        state.dialogVisible = false
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
    } else {
        ElMessage({
            message: '修改失败',
            type: 'error',
        })
    }
}
// 分配权限
const Powers = async (val: any) => {
    id = val
    state.dialogVisible = true
    state.checkeds = []
    const res: any = await http.getpermissionshow({ id: val })
    console.log(res);

    state.checkeds = res.data.length == 1 ? res.data : res.data.map((item: any) => item.id)
    // console.log(state.checkeds);


}

// 查询所有权限
const getpermission = async () => {
    const res: any = await http.getpermissionlist([])
    if (res.code === 10000) {

        state.permission = res.data
    }
}
// 角色id找权限





// 分页 
const sizeChange = (val: number) => {
    state.parmas.pageSize = val
    getlist()
}
const pageChange = (val: number) => {
    state.parmas.page = val
    getlist()
}



// 角色列表
const getlist = async () => {
    const res: any = await http.getrolelist(state.parmas)
    if (res.code === 10000) {
        state.tableData = res.data.list
        state.tableConfig.total = res.data.total
    }
}




// 修改
const update = (val: any) => {
    console.log(val);
    router.push({ path: '/roleadd', query: JSON.parse(JSON.stringify(val)) })
}
const dels = (val: any) => {
    const res: any = JSON.parse(val).map((item: { id: any; }) => item.id)
    ids.value = res.join()
}
// 单删
const del = (val: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消 ',
            type: 'warning',
        }
    )
        .then(async () => {
            const res: any = await http.getroledel({ id: val.id })
            if (res.code === 10000) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
            getlist()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
// 批量删除
const Dels = () => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res: any = await http.getroledel({ id: ids.value })
            if (res.code === 10000) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
            getlist()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
// 添加
const Add = () => {
    router.push('/roleadd')
}
// 查询
const Search = () => {
    getlist()
}
// input清空以后返回原来的值
const clearable = () => {
    getlist()
}
onMounted(() => {
    // 角色列表
    getlist()
    // 查询所有权限
    getpermission()
})
</script>

<style scoped>
.input {
    width: 442px;
    height: 59px;
}

.el-input {
    width: 210px;
    height: 28px;
    font-size: 12px;
    margin-right: 10px;
}

.el-button {
    height: 28px;
    font-size: 12px;
}

:deep(.el-message-box) {
    width: 960px !important;
    max-width: 960px !important;
}
</style>